import React, { memo ,useState,useEffect} from 'react'
import "./gun.css"
import BS from "better-scroll"
import axios from 'axios'
import Z from "./Gun.module.css"

// 防抖
function debounce(fn,delay){
  let timer = null //借助闭包
  return function(){
    if(timer){
        clearTimeout(timer)
    }
    timer = setTimeout(fn,delay)  //简化写法
  }
}


function Gun() {
  
  let [list,setList] = useState([])
  
  useEffect(() => {
    
      axios.get("/api/guarantee/getall?page=1&pagesize=300",).then(res=>{
        console.log(res,"res");
        console.log(res.data,"fff");
        setList(res.data)                  
        // console.log(list,"fflist")
      })
    
      
                      // axios({
                      //   url:"/api/guarantee/getall",
                      //   method:"get",
                      //   params:{
                      //     page,
                      //     pagesize
                      //   }.then(res=>{
                      //     console.log(res.data)})
                      //  })
    },[])


  useEffect(()=>{
     // 初始化完成
    let bs =   new BS(".box",{
     
      probeType:2,
      scrollY:true
    })
    
    // 想滚动加载  监听滚动事件   -- 

    bs.on("scroll",function abc(pos){
    // console.log(pos,"")
    // 获取内容高度  -- 获取容器高度 
    // 判断  使用  防抖 ....
    let contentHeight = document.querySelector(".ul").offsetHeight
    let containerHeight = document.querySelector(".box").offsetHeight
    console.log(contentHeight,"aa");
    console.log(containerHeight,"bb");      
    let scrollHeight  = Math.abs(bs.y)
    if(scrollHeight-20>=contentHeight-containerHeight){
      setList([...list])
      
      // alert("加载更多数据")
      console.log(setList,"qqq")
      
    }

    bs.on("scroll",debounce(abc,1000))
  })

  },[list])

  return (
  
    <div  className="box">
      <ul className="ul">
         {
           list.map((item,i)=> <li className={Z.li} key={i}>
              <div className={Z.left} style={{marginLeft:"10px"}}>
             
                  <img className={Z.img} src={item.photos.length&&item.photos[0].path}/>
              </div>
              <div className={Z.right} style={{width:"260px",paddingLeft:"30px"}}>
                  <p className={Z.p0}>
                    {item.pname}
                    {/* [04月10日到货] CHUCK TAYLOR ALL STAR HI 1970S */}
                  </p>
                  <p className={Z.p11}>
                      <i className={Z.no}>货号</i><span className={Z.span}>AOHNC {item.count}  {item.series}</span>
                  </p>
                  <p className={Z.p22}>
                     ￥<b className={Z.b1}>{item.price}</b><span className={Z.num}>最新上架</span>
                  </p>
              </div>
             
            </li>)
         }  
      </ul> 
    </div>
  )

}
export default Gun


